<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS DOM API练习2</title>
</head>
<body>
    <!-- <img src="cheems.jpg" alt=""> -->
    <!-- <input type="checkbox" id="all">我全都要<br>
    <input type="checkbox" class="girl">华为<br>
    <input type="checkbox" class="girl">百度<br>
    <input type="checkbox" class="girl">字节<br> -->

    <!-- 操作字体 -->
    <!-- <div style="font-size: 20px;">这是一个文本</div> -->

    <!-- 白天夜间模式切换 -->
    <!-- <style>
        .light {
            background-color: white;
            color: black;
        }
        .dark {
            background-color: black;
            color: white;
        }
    </style>
    <div class="light" style="height: 500px;">这是一段话</div>
    <button>关灯</button> -->


    <!-- 操作节点练习 -->
    <div class="container">

    </div>
    <button>删除节点</button>

    <script>
        // 操作节点
        // 新增节点
        // 1. 创建节点
        let newDiv = document.createElement('div');
        // 创建后可以对该节点的任意属性赋值
        newDiv.innerHTML = 'hello';
        newDiv.id = 'newDiv';
        newDiv.style = 'font-size:40px;';
        console.log(newDiv);
        // 2. 把节点挂在DOM树上
        let container = document.querySelector('.container');
        container.appendChild(newDiv);

        //删除节点
        let button = document.querySelector('button');
        button.onclick = function() {
            container.removeChild(newDiv);
        }


        

        // 操作元素的样式
        // 1. 通过style修改行内样式属性
        // 示例：放大字体
        // let div = document.querySelector('div');
        // div.onclick = function() {
        //     // 获取当前元素大小
        //     // 注意html中用的是脊柱式，而由于JS不支持-，因此需要用驼峰式
        //     let fontSize = parseInt(div.style.fontSize);
        //     fontSize += 5;
        //     // 当修改CSS属性时，一定要注意单位，如果单位不合适或者遗漏，就会失效
        //     div.style.fontSize = fontSize + 'px';
        // }
        // 2. className/classList 对应的内部样式/外部样式，应用了一个/一组CSS类名
        // 由于JS ES6以上的版本引入了类的概念，因此class在JS中也是一个关键字，只能使用上述两个属性名代替
        // 白天模式和夜间模式切换
        // let button = document.querySelector('button');
        // let div = document.querySelector('div');
        // button.onclick = function() {
        //     if(div.className == 'light') {
        //         button.innerHTML = '开灯';
        //         div.className = 'dark'
        //     }else if(div.className == 'dark') {
        //         button.innerHTML = '关灯';
        //         div.className = 'light';
        //     }
        // }




        // // JS对form表单中的操作
        // // 1. 获取元素
        // let all = document.querySelector('#all');
        // let girls = document.querySelectorAll('.girl');
        // // 2. 给 all 注册点击事件
        // all.onclick = function() {
        //     for(let i = 0; i < girls.length; i++) {
        //         // 复选框中的状态
        //         girls[i].checked = all.checked;
        //     }
        // }

        // // 3. 对girl注册点击操作，实现对我全都要的自动选入和取消操作
        // // 这步操作是给每个元素设置一个回调函数
        // for(let i = 0; i < girls.length; i++) {
        //     girls[i].onclick = function() {
        //         all.checked = checkGirls(girls);
        //     }
        // }

        // function checkGirls(girls) {
        //     // 判定是否所有的girl都被选中
        //     for(let i = 0; i < girls.length; i++) {
        //         // 如果有一个是未被选中的状态，就返回false
        //         if(!girls[i].checked) {
        //             // 也可以写成返回空字符串
        //             return false;
        //         }
        //     }
        //     // 也可以写成返回'checked'
        //     return true;
        // }


        // let img = document.querySelector('img');
        // // console.dir方法，可以打印出一个dom对象的全部属性和值
        // console.dir(img);
        // img.onclick = function() {
        //     console.log(img);
        //     if(img.src.indexOf('cheems.jpg') >= 0) {
        //         img.src = 'doge.jpg';
        //     }else if(img.src.indexOf('doge.jpg') >= 0) {
        //         img.src = 'cheems.jpg';
        //     }
        // }
    </script>
</body>
</html>